<template>
  <el-popover
    v-model="visible"
    :placement="placement"
    popper-class="check-user-card-popover"
    trigger="manual">
    <UserCard v-clickoutside="closePopover" v-loading="loading" v-if="userInfo" ref="userCardRef" :current-user="currentUser" :user-info="userInfo" :is-mobile-page="isMobilePage"/>
    <template slot="reference">
      <component v-loading="loading" v-if="$slots.default" :is="containerTag" class="check-user-loading-container" element-loading-spinner="el-icon-loading" @click.stop="getUser">
        <slot />
      </component>
      <span v-loading="loading" v-else-if="label" element-loading-spinner="el-icon-loading" class="button-text check-user ellipsisOne check-user-loading-container" @click.stop="getUser">{{ label }}</span>
      <span v-loading="loading" v-else element-loading-spinner="el-icon-loading" class="button-text check-user check-user-loading-container" @click.stop="getUser">查看</span>
    </template>
  </el-popover>
</template>

<script>
import { getInfo } from '@/api/login';
import Clickoutside from 'element-ui/src/utils/clickoutside';
import UserCard from './card';

export default {
  name: 'CheckUser',
  directives: { Clickoutside },
  components: { UserCard },
  props: {
    userId: {
      type: String | Number,
      default: null
    },
    label: {
      type: String,
      default: null
    },
    placement: {
      type: String,
      default: 'top'
    },
    containerTag: {
      type: String,
      default: 'span'
    },
    currentUser: {
      type: Object,
      default: null
    },
    isMobilePage: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      loading: false,
      userInfo: null,
      visible: false
    };
  },
  methods: {
    getUser() {
      if (!this.userId) return;
      if (this.visible) {
        this.visible = false;
        return;
      }
      this.loading = true;
      getInfo(this.userId).then(res => {
        this.loading = false;
        this.visible = true;
        if (res.code === 200) {
          if (Array.isArray(res.data.departmentDetail)) {
            res.data.departmentDetail = res.data.departmentDetail.map(item => {
              return item.replace(/>/g, '-');
            });
          }
          if (!res.data.financialInfo) {
            res.data.financialInfo = {};
          }
          this.userInfo = res.data;
        }
      }).catch(() => {
        this.loading = false;
        this.visible = true;
      });
    },
    closePopover() {
      this.$refs['userCardRef'].showToggleBtn = false;
      this.visible = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.check-user {
  display: inline;
}
.check-user-loading-container {
  &::v-deep {
    .el-loading-mask {
      display: flex;
      .el-loading-spinner {
        background-image: none !important;
        margin-top: 0 !important;
        top: 50%;
        left: 50%;
        width: 100%;
        height: 100%;
        transform: translate(-50%, -50%);
        @include flexStyle($align: center, $justify: center);
      }
    }
  }
}
</style>
<style lang="scss">
.check-user-card-popover {
  padding: 0 !important;
  background: #fafbff !important;
  border-radius: 8px !important;
  box-shadow: 0px 0px 6px 0px #c6c6c6 !important;
  .popper__arrow::after{
    border: none;
  }
}
</style>
